<template>
    <div class="number-input l-f l-col-stretch" :style="{
        height: height + 'px'
    }">
        <div class="number-input_btn l-f l-row-c" @click="onEvent('sub')">
            <img class="number-input_btn_icon" src="@/assets/icons/icon-reduce.svg" alt="">
        </div>
        <input :value="modelValue" @input="numberInput" class="number-input_value l-f1" :placeholder="placeholder" autocomplete="off" />
        <div class="number-input_btn l-f l-row-c" @click="onEvent('add')">
            <img class="number-input_btn_icon" src="@/assets/icons/icon-add.svg" alt="">
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    modelValue: {
        type: Number,
        default: 0
    },
    placeholder: {
        type: String,
        default: ''
    },
    min: {
        type: Number,
        default: 0
    },
    max: {
        type: Number,
        default: 999999999999
    },
    height: {
        type: Number,
        default: 56
    }
})

const emits = defineEmits(['update:modelValue'])

const numberInput = (event) => {
  const value = event.target.value;
  let checkPlan = '' + value
  checkPlan = checkPlan
      .replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
      .replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
      .replace(/^\./g, '') // 保证第一个为数字而不是.
      .replace('.', '$#$')
      .replace(/\./g, '')
      .replace('$#$', '.') 
  if (checkPlan.indexOf('.') < 0 && checkPlan !== '') {
    // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
    checkPlan = parseFloat(checkPlan) + ''
  } else if (checkPlan.indexOf('.') >= 0) {
    checkPlan = checkPlan
        .replace(/^()*(\d+)\.(\d\d\d\d\d\d).*$/, '$1$2.$3') // 只能输入6个小数
  }
  if(checkPlan !== '') {
    if(checkPlan.indexOf('.') >= 0) {
        if(checkPlan.length >= 3) {
            if(parseFloat(checkPlan) > props.max) {
                checkPlan = props.max
            }else 
            if(parseFloat(checkPlan) < props.min) {
                checkPlan = props.min
            }
        }
    }else {
        if(parseFloat(checkPlan) > props.max) {
            checkPlan = props.max
        }else 
        if(parseFloat(checkPlan) < props.min) {
            checkPlan = props.min
        }
    }
  }
  if(!checkPlan) {
    checkPlan = 0;
  }
  event.target.value = checkPlan; // 直接修改视图中的值以保持格式一致
  emits('update:modelValue',parseFloat(checkPlan))
}

const onEvent = (type) => {
    let number = props.modelValue
    switch(type) {
        case 'sub':
            if(parseFloat(props.modelValue) > 1 && parseFloat(props.modelValue) > parseFloat(props.min)) {
                number--
            }else {
                number = props.min
            }
            break
        case 'add':
            if(parseFloat(props.modelValue) < parseFloat(props.max)) {
                number++
            }
            break
    }
    emits('update:modelValue',parseFloat(number.toFixed(6)))
}

</script>

<style lang="scss" scoped>
.number-input {
    height: 56px;
    padding: 0 8px;
    box-sizing: border-box;
    background-color: #1e2239;
    border-radius: 8px;
    &_btn {
        padding: 0 10px;
        box-sizing: border-box;
        cursor: pointer;
        &:active {
            opacity: .5;
        }
        &_icon {
            width: 20px;
            height: 20px;
        }
    }
    &_value {
        background: transparent;
        outline: none;
        border: none;
        text-align: center;
        font-size: 16px;
        font-weight: 500;
    }
}
</style>